import { CopyIcon } from "@radix-ui/react-icons";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { projectStatusEnum } from "@/database/schema";
import { z } from "zod";
import { trpc } from "@/app/_trpc/client";
import { useState } from "react";
import { useToast } from "@/components/ui/use-toast";
import { PROJECT_STATUS } from "@/helpers/validators";
import Loading from "@/components/Loading";



export function ModifyProjectStatusDialog({
  projectId,
}: {
  projectId: string;
}) {
  const [open, setOpen] = useState(false);
  const { toast } = useToast();

  const utils = trpc.useUtils();
  const { mutate: updateProjectMutation,isPending } =
    trpc.projects.updateProject.useMutation({
      onSuccess(data) {
        utils.projects.getProjectById.invalidate({value:projectId});
        utils.projects.getProjects.invalidate()
        utils.tasks.getProjectTasks.invalidate()
        setOpen(false);
        toast({
          title: "Exito!",
          description: "Projecto actualizado con exito.",
        });
      },
      onError(error) {
        toast({
          title: "Error!",
          description: "Error al actualizar el projecto.",
          variant: "destructive",
        });
      },
    });

  const handleSubmit = (formData: FormData) => {
    const status = formData.get("status");

    const parsedStatus = projectStatusEnum.safeParse(status);

    if (parsedStatus.success && projectId) {
      updateProjectMutation({ status: parsedStatus.data, id:projectId });
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" variant="secondary">Cambiar estado</Button>
      </DialogTrigger>
      <DialogContent className="!min-w-[400px]">
        <DialogHeader>
          <DialogTitle>Estado del projecto</DialogTitle>
          <DialogDescription>
            Cambiar el estado actual del projecto
          </DialogDescription>
        </DialogHeader>
        <form action={handleSubmit} className="flex items-center space-x-2">
          <div className="grid flex-1 gap-2">
            <Label htmlFor="link" className="sr-only">
              Estado
            </Label>
            <Select name="status">
              <SelectTrigger className="flex-1">
                <SelectValue placeholder="Estado" />
              </SelectTrigger>
              <SelectContent>
                {PROJECT_STATUS.map((status) => (
                  <SelectItem key={status} value={status}>
                    {status}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <DialogFooter className="flex gap-2 flex-row ">
            <DialogClose asChild>
              <Button type="button" variant="secondary">
                Close
              </Button>
            </DialogClose>
            <Button type="submit" className="px-3">
            <span className="mr-2">
                  {isPending ? "Modificando" : "Modificar" }
                </span>
                {isPending && <Loading size={15} />}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}